<template>
  <view class="container bg-grey">
    <sb-back-icon></sb-back-icon>
    <view>
      <u-search
        bg-color="white"
        v-model="keywords"
        @focus="delHistory = false"
        @search="handleSearch"
        @custom="handleSearch"
        confirm-type="search"
        margin="20rpx"
      >
      </u-search>
      <view class="container bg-white">
        <view v-if="historyList && historyList.length">
          <view class="bold mar30 u-flex j-s">
            <view> Search History </view>
            <view>
              <view v-if="delHistory" class="del-action u-font-12">
                <span @click="handleClear">Clear</span>
                <span class="marh10">|</span
                ><span class="finish" @click="delHistory = false"
                  >Confirm</span
                ></view
              >
              <u-icon
                v-else
                name="trash"
                color="#ccc"
                size="28"
                @click="delHistory = true"
              ></u-icon>
            </view>
          </view>
          <view class="flex mar20">
            <view
              class="telephone bg-grey mar10 padh15"
              v-for="(item, index) in historyList"
              :key="index"
              @click="selectToSearch(item)"
            >
              {{ item }}
              <u-icon
                v-if="delHistory"
                @click.stop="delSingelHistory(item)"
                name="close"
                color="#ccc"
                size="20"
                class="u-margin-left-10"
              ></u-icon>
            </view>
          </view>
        </view>

        <view>
          <view class="bold marh30 marv10"> Popular Search </view>
          <view class="flex mar20">
            <view
              v-for="(item, i) in hotList"
              :key="i"
              class="search bg-grey mar10 padh15"
              @click="selectToSearch(item.label)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      historyList: [],
      keywords: "",
      dataList: [],
      hotList: [],
      currProductKey: "ZJ",
      delHistory: false,
      queryParams: {
        page: 1,
        size: 10,
        name: "",
        id: 1,
      },
    };
  },
  methods: {
    async handleClear() {
      await this.$confirm("confirm clear the history?");
      this.historyList = [];
      this.removeCache("theme_search_history");
      this.delHistory = false;
    },
    async getHotList() {
      let { success, data } = await this.$get(
        "/search-keywords/list",
        {
          pageIndex: 1,
          pageSize: 10,
          keywords: this.keywords,
        },
        false
      );
      if (success) this.hotList = data.rows;
    },
    async handleSearch() {
      if (this.keywords && !this.historyList.includes(this.keywords)) {
        this.historyList.unshift(this.keywords);
        this.setCache("goods_search_history", this.historyList);
      }
      this.$go2(`./list?keywords=${this.keywords}`);
    },
    selectToSearch(item) {
      this.keywords = item;
      this.handleSearch();
    },
    delSingelHistory(targetItem) {
      this.historyList = this.historyList.filter((item) => item !== targetItem);
    },
    getHistory() {
      this.historyList = this.getCache("goods_search_history") || [];
    },
  },
  onLoad() {
    this.getHotList();
    this.getHistory();
  },
};
</script>

<style lang="scss" scoped>
.telephone {
  border-radius: 20rpx;
}

.cup {
  border-radius: 20rpx;
}

.search {
  border-radius: 20rpx;
}
.del-action {
  font-weight: normal;
  .finish {
    color: $main-color;
  }
}
</style>
